<template>
  <div>
    <div class="new_liebiao_1">
      <navi> {{ lanmunews.data[0].lanmu.name }} </navi>
      <div class="liebiao_l">
        <div class="liebiao_a"></div>
        <ul class="d4">
          <li v-for="item in latest.data.slice(0, 12)">
            <NuxtLink :to="'/news' + item.id + '.html'">{{ item.biaoti }}</NuxtLink>
          </li>
        </ul>
        <div class="liebiao_b"></div>
        <ul class="d4">
          <li v-for="item in recommend.data.slice(0, 12)">
            <NuxtLink :to="'/news' + item.id + '.html'">{{ item.biaoti }}</NuxtLink>
          </li>
        </ul>
      </div>
      <div class="liebiao_2">
        <ul class="d4">
          <li v-for="item in lanmunews.data.slice(0, 30)">
            <NuxtLink :to="'/news' + item.id + '.html'">{{ item.biaoti }}</NuxtLink>
          </li>
        </ul>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const runtimeConfig = useRuntimeConfig();
const { data: latest }: any = await useFetch(
  runtimeConfig.public.apiBase + "/news?pageNum=1&pageSize=12"
);
const { data: recommend }: any = await useFetch(
  runtimeConfig.public.apiBase + "/news?pageNum=1&pageSize=12"
);
const { data: lanmunews }: any = await useFetch(
  runtimeConfig.public.apiBase + "/news?pageNum=1&pageSize=30&lanmu=" + route.params.id
);
</script>

<style scoped>
.new_liebiao_1 {
  width: 965px;
  height: auto;
  border: #c9c9c9 1px solid;
  margin: 0 auto;
}

.liebiao_a {
  width: 240px;
  height: 50px;
  background: url(/images/liebiao_2.jpg) no-repeat left center;
  border-bottom: 1px solid #e6e6e6;
}

.liebiao_b {
  width: 240px;
  height: 50px;
  background: url(/images/liebiao_1.jpg) no-repeat left center;
  border-bottom: 1px solid #e6e6e6;
}

.liebiao_l {
  width: 280px;
  height: auto;
  float: left;
  background: url(/images/liebiao_li_bg.jpg) right center no-repeat;
}

.liebiao_2 {
  width: 684px;
  float: right;
  height: auto;
  line-height: 25px;
}

.d4 {
  margin-bottom: 12px;
}

.d4 li {
  height: 25px;
  line-height: 25px;
  background: url(/images/liebiao_li.jpg) no-repeat 5px 9px;
  padding-left: 15px;
}
</style>